<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>主页</title>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			background-image: url('./img/download.png');
		}

		.header {
			background-color: #b3aaaa;
			padding: 10px;
			text-align: center;
		}

		.topnav {
			overflow: hidden;
			background-color: #918e8e;
		}

		.topnav a {
			float: left;
			display: block;
			color: #f1f1f1;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}

		.topnav a:hover {
			background-color: #ddd;
			color: black;
		}

		.footer {
			position: fixed;
			bottom: 0;
			height: 50px;
			font-size: 12px;
			font-family: "宋体";
			text-align: center;
			width: 100%;
		}
	</style>
	<script type="text/javascript" src="js/xhr.js"></script>
	<script type="text/javascript">

		function init() {
			refresh();
		}

		function refresh() {
			var post_req = {
				"type": 0,
				"limit": "all"
			};

			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					console.log(info);
					for (var i = 0; i < info.data.length; i++) {
						console.log('data = ', info.data[i].val)

						if (info.data[i].key == 1) {
							document.getElementById('linux').value = info.data[i].val;
						}
						else if (info.data[i].key == 2) {
							document.getElementById('type').value = info.data[i].val;
						}
					}
				}
			);
		}
	</script>
</head>

<body onload="init()">
	<div class="header">
		<h1>设备显示平台</h1>
	</div>
	<div class="topnav" style="height:50px;">
		<a href="temp_index.html" style="background-color: #ddd;color: black;">主页</a>
		<a href="modbus.html">modbus设备</a>
		<a href="stm32.html">stm32设备</a>
	</div>
	<div id="content" style="float:center;padding: 14px 16px;text-align: center;">
		<h2>
			<p>系统</p>
		</h2>
		<p>主机名</p>
		<input type="text" name="4001" id="linux" value="">
		<p>固件版本</p>
		<input type="text" name="4002" id="type" value="">
		<p>当前时间</p>
		<span id="date" style="color: rgb(5, 5, 5);"></span>
		<p>运行时间</p>
		<span id="time" style="color: rgb(5, 5, 5);"></span>
	</div>

	<script>
		function p() {
			var time = new Date();
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			month = month < 10 ? "0" + month : month;
			var week = "日一二三四五六".charAt(time.getDay());
			var day = time.getDate();
			day = day < 10 ? "0" + day : day;
			var hour = time.getHours();
			hour = hour < 10 ? "0" + hour : hour;
			var minute = time.getMinutes();
			minute = minute < 10 ? "0" + minute : minute;
			var second = time.getSeconds();
			second = second < 10 ? "0" + second : second;
			var current = year + "年" + month + "月" + day + "日" + " 星期" + week + "  " + hour + ":" + minute + ":" + second;
			document.getElementById("date").innerHTML = current;
		}
		p();
		setInterval('p()', 1000);

		function showsectime() {
			var loginDay = new Date("2022-11-26 15:00:00");
			var today = new Date();
			var timeold = today.getTime() - loginDay.getTime();
			var sectimeold = timeold / 1000
			var secondsold = Math.floor(sectimeold);
			var msPerDay = 24 * 60 * 60 * 1000; var e_daysold = timeold / msPerDay;
			var daysold = Math.floor(e_daysold);
			var e_hrsold = (daysold - e_daysold) * -24;
			var hrsold = Math.floor(e_hrsold);
			var e_minsold = (hrsold - e_hrsold) * -60;
			var minsold = Math.floor((hrsold - e_hrsold) * -60); var seconds = Math.floor((minsold - e_minsold) * -60).toString();
			document.getElementById("time").innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
			setTimeout(showsectime, 200);

		} showsectime();
	</script>
	<div class="footer">
			Copyright © 2022 22071-SIXGROUP All Rights Reserved.</br>POWER BY 22071-SIXGROUP
		</div>
</body>

</html>